<template>
  <div style="padding: 10px">
    <div>
      金额列切换：
      <d-radio :options="options" v-model="hideColumnMoney"></d-radio>
    </div>
    <div>
      信息列切换：
      <d-radio :options="options" v-model="hideColumnXinxi"></d-radio>
    </div>
    <div>
      国籍列切换：
      <d-radio :options="options" v-model="hideColumnGuoji"></d-radio>
    </div>
    <d-table
      :data="tableData"
      :columns="columns"
      border
      show-overflow-tooltip
      :showPagination="false"></d-table>
  </div>
</template>

<script lang="ts" setup>
  import { ref, toRef } from 'vue'
  const hideColumnMoney = ref(false)
  const hideColumnXinxi = ref(false)
  const hideColumnGuoji = ref(false)
  // 动态显示隐藏 所以columns需要使用 ref 包裹
  const columns = ref([
    { label: '排序', cType: 'index' },
    { label: '日期', prop: 'date', cType: 'date' },
    {
      label: '金额',
      prop: 'money',
      cType: 'link',
      align: 'right',
      format: { type: 'money', decimal: 2 },
      hide: toRef(hideColumnMoney, 'value')
    },
    {
      label: '国籍',
      hide: toRef(hideColumnGuoji, 'value'),
      children: [
        { label: '姓名', prop: 'name' },
        {
          label: '信息',
          hide: toRef(hideColumnXinxi, 'value'),
          children: [
            { label: '城市', prop: 'city', color: { 合肥: 'green' } },
            { label: '地址', prop: 'address' }
          ]
        }
      ]
    }
  ])
  const tableData = [
    {
      date: '2016-05-03',
      name: 'Tom',
      money: 10000,
      city: '合肥',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-02',
      name: 'Tom1',
      money: 100,
      city: '广州',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-04',
      name: 'Tom2',
      money: 200.897,
      city: '上海',
      address: 'No. 189, Grove St, Losao'
    },
    {
      date: '2016-05-01',
      name: 'Tom3',
      money: 1430,
      city: '佛山',
      address: 'No. 189, Grove St, Los Angeles'
    }
  ]
  const options = ref([
    { label: '显示', value: false },
    { label: '隐藏', value: true }
  ])
</script>
<style scoped lang="scss">
  ::v-deep(.el-table) {
    .even-row {
      background-color: #f8d3e5;
    }
    .odd-row {
      background-color: #fce2cd;
    }
    .text-red-500 {
      color: rgb(214, 10, 10);
    }
  }
</style>
